function cdevice() {
    $('#device-label').empty().append('<option value="">设&emsp;备</option>'); //清空列表数据，防止上一次的遗留数据造成影响
    $.ajax({
        url: '/connectdevice/',
        type: 'get',
        contentType: 'application/json',
        success: function (data) {
            for (let i in data) {
                $("#device-label").append("<option value='" + data[i] + "'>" + data[i] + "</option>");
            }
        },
        error: function (msg) {
            alert("设备未连接！");
        }
    })
}

// 获取到设备后，更新包列表
$('#device-label').change(function () {
    $('#packagesname').empty().append('<option value="">包&emsp;名</option>'); //清空列表数据，防止上一次的遗留数据造成影响
    $.ajax({
        url: '/getpackages/',
        type: 'get',
        data: {'device_id': $(this).val()}, //发送过去的数据
        success: function (data) {
            if (data['msg'] === 400) {
                alert('包体获取为空！')
            } else {
                for (let i in data) {
                    $("#packagesname").append("<option value='" + data[i] + "'>" + data[i] + "</option>");
                }
            }
        },
    });
});

let id;
let device;
let packagename;

function begin() {
    device = $('#device-label').val();
    packagename = $('#packagesname').val();
    if (device && packagename) {
        console.log('设备与包体不为空');
        $.get('/cpu/', {
            'device': $('#device-label').val(),
            'packagename': $('#packagesname').val()
        }).done(function (data) {
            old_cpuinfo = data;
            console.log(old_cpuinfo);
        });
        id = setInterval(function () {
            $.ajax({
                url: '/mem/',
                data: {'device': device, 'packagename': packagename},
                success: function (data) {
                    mem = data['mem'];
                }
            });
            for (let i = 0; i <= 1; i++) {
                if (i === 0) {
                    $.ajax({
                        url: '/cpu/',
                        data: {'device': device, 'packagename': packagename},
                        success: function (data) {
                            old_cpuinfo = data;
                        }
                    });
                } else {
                    $.ajax({
                        url: '/cpu/',
                        data: {'device': device, 'packagename': packagename},
                        success: function (data) {
                            new_cpuinfo = data;
                        }
                    });
                }
            }
            //计算后，保留2为小数
            let c_data = ((new_cpuinfo[0] - old_cpuinfo[0]) / (new_cpuinfo[1] - old_cpuinfo[1])).toFixed(2);
            //将计算后的数据加入数组
            cpu_data.push(c_data);
            now = new Date(+now + 1000);
            let newtime = [now.getHours(), now.getMinutes(), now.getSeconds()].join(':');
            mem_data.push(mem);
            t.push(newtime);
            memery.setOption({
                xAxis: [{
                    data: t,
                }],
                series: [{
                    data: mem_data,
                }],
            });
            cpuinfo.setOption({
                xAxis: [{
                    data: t,
                }],
                series: [{
                    data: cpu_data,
                }]
            })
        }, 1000);
    } else {
        alert('设备或者包名为空，请重新点击连接设备！')
    }
}

function end() {
    clearInterval(id);
}

//表格数据显示
// **********************************************************************
let memery = echarts.init(document.getElementById('memory'));
let cpuinfo = echarts.init(document.getElementById('cpu'));
let mem;
let now = new Date();
let dat = [now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()];
let mem_data = [];
let cpu_data = [];
let t = [];
let option;
let cpu_option;
let old_cpuinfo;
let new_cpuinfo;
option = {
    color: '#FF5809',
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        }
    },
    legend: {
        data: ['内存']
    },
    xAxis: {
        // type: 'time',//由于定义的now时间格式不是完整的时间格式（我需要用的是时分秒），也就是说我只截取了一部分，
        // 所以不能使用time类型，需要使用默认的类型才能显示出来，否则显示不出来
        splitLine: {
            show: true
        },
        data: dat,
    },
    yAxis: {
        name: "单位(Mb)",
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '内存',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: mem_data
    }]
};
cpu_option = {
    color: '#FFAF60',
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        }
    },
    legend: {
        data: ['CPU']
    },
    xAxis: {
        // type: 'time',//由于定义的now时间格式不是完整的时间格式（我需要用的是时分秒），也就是说我只截取了一部分，
        //             // 所以不能使用time类型，需要使用默认的类型才能显示出来，否则显示不出来
        splitLine: {
            show: true
        },
        data: dat,
    },
    yAxis: {
        name: "单位(%)",
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: 'CPU',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: cpu_data
    }]
};


option && memery.setOption(option);
cpu_option && cpuinfo.setOption(cpu_option);


